<template>
  <div class="padding-lr">
    <div class="text-right padding-bottom-sm">
      <el-button type="success" size="mini" @click="toSave">保存</el-button>
    </div>
    <div style="overflow:hidden">
      <el-form
        size="mini"
        ref="form"
        :rules="rules"
        :model="form"
        class="demo-form-inline"
        label-width="80px"
      >
        <el-row :gutter="30" class="padding-bottom border-bottom">
          <el-col
            :span="8"
            v-if="$store.state.edit.entry.sources.countrySource"
          >
            <el-form-item label="国家" prop="countryId">
              <el-select
                filterable
                clearable
                v-model="form.countryId"
                placeholder="国家"
                @change="changeCountry"
              >
                <el-option
                  :label="val"
                  :value="Number(key)"
                  v-for="(val, key) in $store.state.edit.entry.sources
                    .countrySource"
                  :key="key"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="地址" prop="abroadStockId">
              <el-select
                filterable
                clearable
                v-model="form.abroadStockId"
                placeholder="地址"
              >
                <el-option
                  :label="val.address"
                  :value="Number(val.id)"
                  v-for="(val, key) in addressList"
                  :key="key"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            :span="8"
            v-if="$store.state.edit.entry.sources.configPayNameSource"
          >
            <el-form-item label="费用类型" prop="costId">
              <el-select
                filterable
                clearable
                v-model="form.costId"
                placeholder="费用类型"
              >
                <el-option
                  :label="val"
                  :value="Number(key)"
                  v-for="(val, key) in $store.state.edit.entry.sources
                    .configPayNameSource"
                  :key="key"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row class="padding-top-lg " :gutter="30">
          <el-col :span="12" class="border-right">
            <h5>对外报价</h5>
            <div class="padding-top">
              <el-form-item label="计费标准1">
                <div class="flex">
                  <el-input-number
                    v-model="form.externalPrice"
                    :precision="3"
                    :step="1"
                    :controls="false"
                  ></el-input-number>
                  <span class="margin-left">RMB</span>
                </div>
              </el-form-item>
            </div>
            <div class="padding-top">
              <el-form-item label="计费标准2">
                <div
                  class="flex "
                  v-for="(item, index) in form.externalQuote"
                  :key="index"
                >
                  <el-input
                    :disabled="index === 0"
                    class="flex-sub"
                    type="number"
                    min="0"
                    v-model="item.startDate"
                    placeholder="开始时间"
                  ></el-input>
                  <span class="padding-lr-sm">-</span>
                  <el-input
                    class="flex-sub"
                    type="number"
                    min="0"
                    v-model="item.endDate"
                    placeholder="结束时间"
                  ></el-input>
                  <el-input
                    class="flex-sub"
                    v-model="item.price"
                    placeholder="价格"
                  ></el-input>
                  <el-select
                    class="flex-sub"
                    filterable
                    v-model="item.currency"
                    placeholder="币种"
                  >
                    <el-option
                      :label="val"
                      :value="key"
                      v-for="(val, key) in $store.state.edit.entry.sources
                        .currencySource"
                      :key="key"
                    ></el-option>
                  </el-select>
                  <span class="padding-lr-sm">CBM</span>
                  <el-select
                    class="flex-sub"
                    v-model="item.unit"
                    placeholder="单位"
                  >
                    <el-option label="天" value="天"></el-option>
                    <el-option label="周" value="周"></el-option>
                  </el-select>
                  <div class="flex-sub ">
                    <i
                      class="el-icon-circle-plus text-green text-lg pointer margin-lr-sm"
                      @click="addItem('externalQuote', index)"
                    ></i>
                    <i
                      v-if="index !== 0"
                      class="el-icon-remove text-red text-lg pointer"
                      @click="removeItem('externalQuote', index)"
                    ></i>
                  </div>
                </div>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <h5>成本</h5>
            <div class="padding-top">
              <el-form-item label="计费标准1" prop="internalPrice">
                <div class="flex">
                  <el-input-number
                    v-model="form.internalPrice"
                    :precision="3"
                    :step="1"
                    :controls="false"
                  ></el-input-number>
                  <span class="margin-left">RMB</span>
                </div>
              </el-form-item>
            </div>
            <div class="padding-top">
              <el-form-item label="计费标准2">
                <div
                  class="flex "
                  v-for="(item, index) in form.internalQuote"
                  :key="index"
                >
                  <el-input
                    :disabled="index === 0"
                    class="flex-sub"
                    type="number"
                    min="0"
                    v-model="item.startDate"
                    placeholder="开始时间"
                  ></el-input>
                  <span class="padding-lr-sm">-</span>
                  <el-input
                    class="flex-sub"
                    type="number"
                    min="0"
                    v-model="item.endDate"
                    placeholder="结束时间"
                  ></el-input>
                  <el-input
                    class="flex-sub"
                    v-model="item.price"
                    placeholder="价格"
                  ></el-input>
                  <el-select
                    class="flex-sub"
                    filterable
                    v-model="item.currency"
                    placeholder="币种"
                  >
                    <el-option
                      :label="val"
                      :value="key"
                      v-for="(val, key) in $store.state.edit.entry.sources
                        .currencySource"
                      :key="key"
                    ></el-option>
                  </el-select>
                  <span class="padding-lr-sm">CBM</span>
                  <el-select
                    class="flex-sub"
                    v-model="item.unit"
                    placeholder="单位"
                  >
                    <el-option label="天" value="天"></el-option>
                    <el-option label="周" value="周"></el-option>
                  </el-select>
                  <div class="flex-sub ">
                    <i
                      class="el-icon-circle-plus text-green text-lg pointer margin-lr-sm"
                      @click="addItem('internalQuote', index)"
                    ></i>
                    <i
                      v-if="index !== 0"
                      class="el-icon-remove text-red text-lg pointer"
                      @click="removeItem('internalQuote', index)"
                    ></i>
                  </div>
                </div>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import axios from "axios";
import { m } from "@/store/yg/common/local";
import * as constant from "@/store/yg/common/constant";
import { closeDialog } from "@/utils";
export default {
  data() {
    return {
      addressList: [],
      form: {
        countryId: "",
        costId: "",
        abroadStockId: "",
        externalPrice: "",
        externalQuote: [
          {
            startDate: 0,
            endDate: "",
            price: "",
            currency: "",
            unit: "天"
          }
        ],
        internalPrice: "",
        internalQuote: [
          {
            startDate: 0,
            endDate: "",
            price: "",
            currency: "",
            unit: "天"
          }
        ]
      },
      rules: {
        countryId: [
          { required: true, message: "请选择国家", trigger: "change" }
        ],
        costId: [
          { required: true, message: "请选择费用名称", trigger: "change" }
        ],
        abroadStockId: [
          { required: true, message: "请选择地址", trigger: "change" }
        ],
        internalPrice: [
          { required: false, message: "请填写计费标准1", trigger: "blur" }
        ]
      }
    };
  },
  mounted() {
    console.log("this.$store.state :>> ", this.$store.state.edit);
    this.sources = this.$store.state.edit.entry.sources;
    if (this.$store.state.edit.row.id) {
      this.form = this.$store.state.edit.row;
      this.changeCountry(this.form.countryId);
      if (this.form.internalQuote.length === 0) {
        this.form.internalQuote.push({
          startDate: "0",
          endDate: "",
          price: "",
          currency: "",
          unit: "天"
        });
      }
    }
  },
  destroyed() {
    this.form = {
      countryId: "",
      costId: "",
      abroadStockId: "",
      externalPrice: "",
      externalQuote: [
        {
          startDate: 0,
          endDate: "",
          price: "",
          currency: "",
          unit: "天"
        }
      ],
      internalPrice: "",
      internalQuote: [
        {
          startDate: 0,
          endDate: "",
          price: "",
          currency: "",
          unit: "天"
        }
      ]
    };
  },
  methods: {
    async changeCountry(val) {
      const data = await ajax("queryAbroadStockAddress", {
        countryId: val
      });
      if (Array.isArray(data)) {
        this.addressList = data;
      }
      console.log("data :>> ", data);
    },
    addItem(type, index) {
      const obj = {
        startDate: "",
        endDate: "",
        price: null,
        currency: "",
        unit: "天"
      };
      if (type === "externalQuote") {
        this.form.externalQuote.push(obj);
      } else {
        this.form.internalQuote.push(obj);
      }
    },
    removeItem(type, index) {
      if (type === "externalQuote") {
        this.form.externalQuote.splice(index, 1);
      } else {
        this.form.internalQuote.splice(index, 1);
      }
    },
    checkInfo() {
      let num = 0;
      for (const e of this.form.externalQuote) {
        if (e.startDate != num) {
          console.log("num :>> ", num);
          console.log("e.startDate  :>> ", e.startDate);
          this.$message.error("请正确并且完整填写对外报价！");
          console.log("1 :>> ", 1);
          return false;
        } else if (
          (e.startDate || e.startDate === 0) &&
          e.endDate &&
          (e.price || e.price == 0) &&
          e.currency &&
          e.unit
        ) {
          num = Number(e.endDate) + 1;
        } else {
          this.$message.error("请正确并且完整填写对外报价！");
          return false;
        }
      }
      // this.form.internalQuote[0].price ||
      if (
        (this.form.internalQuote.length === 1 &&
          (this.form.internalQuote[0].endDate ||
            this.form.internalQuote[0].price ||
            this.form.internalQuote[0].currency)) ||
        this.form.internalQuote.length > 1
      ) {
        let num1 = 0;
        for (const e of this.form.internalQuote) {
          if (e.startDate != num1) {
            console.log("e.startDate :>> ", e.startDate);
            console.log("num1 :>> ", num1);
            this.$message.error("请正确并且完整填写成本！");
            return false;
          } else if (
            (e.startDate || e.startDate === 0) &&
            e.endDate &&
            (e.price || e.price == 0) &&
            e.currency &&
            e.unit
          ) {
            num1 = Number(e.endDate) + 1;
          } else {
            console.log("e.price :>> ", e.price);
            this.$message.error("请正确并且完整填写成本！");
            return false;
          }
        }
      } else {
      }

      return true;
    },
    async toSave() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.checkInfo()) {
            this.saveInfo();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async saveInfo() {
      if (
        this.form.internalQuote.length === 1 &&
        (!this.form.internalQuote[0].endDate ||
          !this.form.internalQuote[0].price ||
          !this.form.internalQuote[0].currency)
      ) {
        this.form.internalQuote = [];
      }
      const { code, data, message } = await ajax("save", this.form);
      if (code === 200) {
        this.$message.success("保存成功！");
        setTimeout(function() {
          closeDialog();
        }, 1000);
      } else {
        this.$message.error(message || "保存失败！");
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.border-right {
  border-right: 1px solid #ccc;
}
.border-bottom {
  border-bottom: 1px solid #ccc;
}
</style>
